<template>
	<view class="main">
		<view class="main-top">
			<view class="main-search">
				<image src="../../../../../static/phone/phone_search.png" 
				style="width: 32rpx;height: 32rpx;margin-left: 32rpx;"></image>
				
				<input type="text" 
						v-model="search" 
						@input="muban_searchInput"
						class="placeholder_class"  
						placeholder-style="color:#999999"
					placeholder="搜索文件名称">
			</view>
		</view>
		<view style="display: flex;align-items: center;;margin-top: 16rpx;">
			<text class="ttext1" style="margin-left: 32rpx;">模板库</text>
			
			<view style="display: flex;align-items: center;margin-left: auto;margin-right: 32rpx;">
				<view style="display: flex;align-items: center;" @click="sort">
					<text class="ttext1" style="margin-left: 32rpx;">排序</text>
					<image src="../../../../../static/arrow_down.png" 
					style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>
				</view>
				
				<view style="display: flex;align-items: center;margin-left: 64rpx;" @click="sift">
					<text class="ttext1" style="margin-left: 32rpx;">筛选</text>
					<image src="../../../../../static/select.png" 
					style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>
				</view>
				
			</view>
			
		</view>
		
		<view v-for="(item,index) in dataList" :key="index" @click="preview(item,index)"
		style="margin-left: 32rpx;margin-right: 32rpx;margin-top: 24rpx;">
			<view style="display: flex;">
				<image src="../../../../../static/phone/jpg.png" 
				style="width: 48rpx;height: 48rpx;" v-if="item.fileSuffix =='jpg' || item.fileSuffix=='png'"></image>
				<image src="../../../../../static/phone/case-detail-excel.png"
				style="width: 48rpx;height: 48rpx;" v-if="item.fileSuffix =='xls' || item.fileSuffix=='xlsx'"></image>
				<image src="../../../../../static/phone/case-detail-word.png"
				style="width: 48rpx;height: 48rpx;" v-if="item.fileSuffix =='docx' || item.fileSuffix=='doc'"></image>
				<image src="../../../../../static/phone/case-detail-pdf.png"
				style="width: 48rpx;height: 48rpx;" v-if="item.fileSuffix =='pdf' || item.fileSuffix=='pdfx'"></image>
				<image src="../../../../../static/phone/case-detail-ppt.png"
				style="width: 48rpx;height: 48rpx;" v-if="item.fileSuffix =='pptx' || item.fileSuffix=='ppt'"></image>
				<view style="margin-left: 16rpx;">
					<view class="filename">
						{{item.name}}.{{item.fileSuffix}}
					</view>
					<view class="filetime">
						{{item.classify.name}}
					</view>
				</view>
				
			</view>
			
		</view>
		
		<common-choose v-if="showSort" :chooseList="sortList" 
			:chooseResult="sortResult" :chooseTag="chooseTag" @gotIt="gotIt"></common-choose>
			
		<view class="zhezhao" v-if="showSift">
			
			<view class="view-bottom">
				<view class="title-view">
					按模板类型筛选
				</view>
				<view class="sift-listview">
					<view v-for="(item,index) in siftTypeList" :key="index" 
					:class="item.sel ? 'sift-item-foucs':'sift-item'"  @click="sfitType(index)">
						{{item.name}}
					</view>
				</view>
				
				<!-- <view class="title-view">
					上传角色筛选
				</view>
				<view class="sift-listview">
					<view v-for="(item,index) in siftRoleList" :key="index" 
					:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="siftRole(index)">
						{{item.name}}
					</view>
				</view> -->
				
				
				<view class="view-bottom-s">
					<view class="view-bottom-c" @click="cancelSift">
						重置
					</view>
					<view class="view-bottom-b" @click="goSift">
						确定
					</view>
				</view>
				<view style="height: 68rpx;background: #ffffff;" v-if="needAdapt">
					<!-- 苹果x及以上的安全距离 -->
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import commonChoose from '../../../common/commonChoose.vue'
	let app = ''
	export default{
		components:{commonChoose},
		data(){
			return{
				role:'',
				roleUrl:'',
				search:'',
				dataList:[],
				
				//以下为排序
				showSort:false,
				sortResult:'全部',
				sortResultId:'1',
				chooseTag:'sort',
				sortList: [{
						id: '1',
						value: '全部',
						name:'全部'
					},
					{
						id: '2',
						value: '按更新时间倒序',
						name:'按更新时间倒序'
					},
					{
						id: '3',
						value: '按更新时间顺序',
						name:'按更新时间顺序'
					}
				],
				//以上为排序
				//以下为筛选
				showSift:false,
				needAdapt:false,
				siftTypeList:[],
				classifyId:'',
				
				keyword:'',
				// siftRoleList:[
				// 	{name:"角色一",sel:false},
				// 	{name:"角色一",sel:false}
				// ],
			}
		},
		onLoad() {
			app = getApp()
			var _this = this
			console.log(_this.chooseList)
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			//获取模板分类
			_this.getTemplateClassify()
			//获取模板列表
			_this.getTemplateList()
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods:{
			
			/**
			 * 点击了排序
			 */
			sort(){
				this.$nextTick(()=>{
					this.showSort = true
				})
			},
			/**
			 * @param {Object} 点击了筛选
			 */
			sift(){
				this.showSift = true
			},
			/**
			 * @param {Object} 选择模板分类
			 */
			sfitType(index){
				let _this = this
				_this.siftTypeList[index]['sel'] = !_this.siftTypeList[index]['sel']
			},
			/**
			 * @param {Object} 选择上传角色
			 */
			// siftRole(index){
			// 	let _this = this
			// 	_this.siftRoleList[index]['sel'] = !_this.siftRoleList[index]['sel']
			// },
			
			/**
			 * 获取选择结果
			 */
			gotIt(val){
				console.log(val)
				let _this = this
				_this.showSort = false
				let tag = val.split(";")[0]
				let index = val.split(";")[1]
				_this.sortResult = _this.sortList[index]['value']
				_this.sortResultId = _this.sortList[index]['id']
				_this.dataList = []
				_this.getTemplateList()
			},
			
			/**
			 * 获取筛选结果
			 */
			goSift(){
				let _this = this
				_this.showSift = false
				let classifyId = ''
				for (var i = 0; i < _this.siftTypeList.length; i++) {
					if(_this.siftTypeList[i]['sel']){
						console.log(_this.siftTypeList[i]['name'])
						classifyId = _this.siftTypeList[i]['value']+','+classifyId
					}
				}
				if(classifyId.length>1){
					classifyId = classifyId.substring(0,classifyId.length-1)
				}
				
				_this.classifyId = classifyId
				_this.dataList = []
				_this.getTemplateList()
				// for (var i = 0; i < _this.siftRoleList.length; i++) {
				// 	if(_this.siftRoleList[i]['sel']){
				// 		console.log(_this.siftRoleList[i]['name'])
				// 	}
				// }
				
			},
			
			/**
			 * 重置
			 */
			cancelSift(){
				let _this = this
				for (var i = 0; i < _this.siftTypeList.length; i++) {
					_this.siftTypeList[i]['sel'] = false
				}
				// for (var i = 0; i < _this.siftRoleList.length; i++) {
				// 	_this.siftRoleList[i]['sel'] = false
					
				// }
			},
			/**
			 * 查看模板分类
			 */
			async getTemplateClassify(){
				let _this = this				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/template/classify`,
					method:'POST',//默认是GET
				})
				console.log('模板分类',res)
				if(res.data.code==200){
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.siftTypeList = list
				}
			},
			/**
			 * 模板库中的搜索框
			 */
			muban_searchInput(val){
				let keyword = val.detail.value
				this.keyword = keyword
				this.getTemplateList()
			},
			
			/**
			 * 获取模板列表
			 */
			async getTemplateList(){
				let _this = this
			
				let parmas={
					"page":1,
					"size":1000,
				}
				if(_this.keyword.length>0){
					parmas.name = 'lk:'+_this.keyword
				}
				if(_this.classifyId!=''){
					if(_this.classifyId.indexOf(',')>-1){
						parmas.classifyId = 'in:'+ _this.classifyId
					}else{
						parmas.classifyId = _this.classifyId
					}
				}
				
				if(_this.sortResultId==2){
					parmas.desc = 'editTime'
				}else if(_this.sortResultId==3){
					parmas.asc = 'editTime'
				}
				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/template/list`,
					data:parmas,
					method:'POST',//默认是GET
				})
				_this.dataList = []
				console.log('模板库',res)
				if(res.data.code==200){
					let list = res.data.data.list
					_this.dataList = list
					
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
				}
			},
			
			/**
			 * 预览文档
			 */
			async preview(item,index){
				// console.log('预览',item)
				// console.log('预览',index)
				let url = item.fileUrl
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data:{
						ossPath:url
					},
					method:'GET',//默认是GET
				})
				// console.log('获取文件路径',res)
				if(res.data.code==200){
					let ss = res.data.data.url
					if(item.fileSuffix =='jpg' || item.fileSuffix=='png'){
						let ssl = []
						ssl.push(ss)
						uni.previewImage({
							indicator: "none", //图片指示器样式
							current:0,
							urls:ssl,
							success: (img) => {
								// console.log(img)
							}
						})
					}else{
						uni.downloadFile({
							url:ss,
							success: (downloadFile) => {
								// console.log(downloadFile)
								uni.openDocument({
									filePath:downloadFile.tempFilePath
								})
							}
						})
					}
					
				}

			},
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.main-top{
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.main-search{
		width: 686rpx;
		height: 64rpx;
		background: #F7F7F7;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
	}
	.placeholder_class{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 8rpx;
	}
	.ttext1{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		
	}
	
	.filename{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.filetime{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 8rpx;
	}
	
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;	
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-radius: 8px 8px 0px 0px;
		
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx #eeeeee solid;
		background-color: #ffffff;
	}
	.view-bottom-c{
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #2DA9C5;
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.view-bottom-b{
		width: 394rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}	
	
	.title-view{
		height: 114rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.sift-listview{
		display: flex;
		flex-wrap: wrap;
	}
	.sift-item{
		width: 212rpx;
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #18252C;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
	.sift-item-foucs{
		width: 212rpx;
		height: 72rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
</style>